<!doctype html>
<html>
    <head>
        <title>Pointer Events properties tests</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
        <script src="/resources/testharness.js"></script>
        <!--script src="/resources/testharnessreport.js"></script-->
        <!-- Additional helper script for common checks across event types -->
        <script type="text/javascript" src="pointerevent_support.js"></script>
        <script type="text/javascript" src="mochitest_support_internal.js"></script>
        <script>
            var detected_pointertypes = {};
            var detected_eventTypes = {};
            var test_pointerEvent = async_test("pointerevent attributes");
            // showPointerTypes is defined in pointerevent_support.js
            // Requirements: the callback function will reference the test_pointerEvent object and
            // will fail unless the async_test is created with the var name "test_pointerEvent".
            add_completion_callback(showPointerTypes);

            function run() {
                var square1 = document.getElementById("square1");
                var rectSquare1 = square1.getBoundingClientRect();
                var pointerover_event;

                var eventList = ['pointerenter', 'pointerover', 'pointermove', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave'];
                eventList.forEach(function(eventName) {
                    on_event(square1, eventName, function (event) {
                        if (detected_eventTypes[event.type])
                            return;
                        detected_pointertypes[event.pointerType] = true;
                        test(function () {
                            assert_equals(event.pointerType, 'mouse', 'pointerType should be mouse');
                        }, event.type + ".pointerType attribute is correct.");

                        // Test button and buttons
                        if (event.type == 'pointerdown') {
                            test(function() {
                                assert_true(event.button == 0, "If left mouse button is pressed button attribute is 0")
                            }, event.type + "'s button attribute is 0 when left mouse button is pressed.");
                            test(function() {
                                assert_true(event.buttons == 1, "If left mouse button is pressed buttons attribute is 1")
                            }, event.type + "'s buttons attribute is 1 when left mouse button is pressed.");
                        } else if (event.type == 'pointerup') {
                            test(function() {
                                assert_true(event.button == 0, "If left mouse button is just released button attribute is 0")
                            }, event.type + "'s button attribute is 0 when left mouse button is just released.");
                            test(function() {
                                assert_true(event.buttons == 0, "If left mouse button is just released buttons attribute is 0")
                            }, event.type + "'s buttons attribute is 0 when left mouse button is just released.");
                        } else {
                            test(function() {
                                assert_true(event.button == -1, "If mouse buttons are released button attribute is -1")
                            }, event.type + "'s button is -1 when mouse buttons are released.");
                            test(function() {
                                assert_true(event.buttons == 0, "If mouse buttons are released buttons attribute is 0")
                            }, event.type + "'s buttons is 0 when mouse buttons are released.");
                        }

                        // Test clientX and clientY
                        if (event.type != 'pointerout' && event.type != 'pointerleave' ) {
                            test(function () {
                                assert_true(event.clientX >= rectSquare1.left && event.clientX < rectSquare1.right, "ClientX should be in the boundaries of the black box");
                            }, event.type + ".clientX attribute is correct.");
                            test(function () {
                              assert_true(event.clientY >= rectSquare1.top && event.clientY < rectSquare1.bottom, "ClientY should be in the boundaries of the black box");
                            }, event.type + ".clientY attribute is correct.");
                        } else {
                            test(function () {
                                assert_true(event.clientX < rectSquare1.left || event.clientX > rectSquare1.right - 1 || event.clientY < rectSquare1.top || event.clientY > rectSquare1.bottom - 1, "ClientX/Y should be out of the boundaries of the black box");
                            }, event.type + "'s ClientX and ClientY attributes are correct.");
                        }

                        // Test isPrimary
                        test(function () {
                            assert_equals(event.isPrimary, true, "isPrimary should be true");
                        }, event.type + ".isPrimary attribute is correct.");

                        // Test width and height
                        test(function () {
                            assert_equals(event.width, 1, "width of mouse should be 1");
                        }, event.type + ".width attribute is correct.");
                        test(function () {
                            assert_equals(event.height, 1, "height of mouse should be 1");
                        }, event.type + ".height attribute is correct.");

                        check_PointerEvent(event);
                        detected_eventTypes[event.type] = true;
                        if (Object.keys(detected_eventTypes).length == eventList.length)
                            test_pointerEvent.done();
                    });
                });
            }
        </script>
    </head>
    <body onload="run()">
        <h1>Pointer Events pointerdown tests</h1>
        <!--
        <h4>
            Test Description: This test checks the properties of mouse pointer events. Move your mouse over the black square and click on it. Then move it off the black square.
        </h4>
        -->
        Test passes if the proper behavior of the events is observed.
        <div id="square1" class="square"></div>
        <div class="spacer"></div>
        <div id="complete-notice">
            <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
            <p>Refresh the page to run the tests again with a different pointer type.</p>
        </div>
        <div id="log"></div>
    </body>
</html>

